<template>
  <div id="app">
    <section class="app-main">
      <transition name="h-fade">
        <router-view :key="key" class="animated"></router-view>
      </transition>
    </section>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed: {
    key () {
      return this.$route.fullPath
    }
  },
  created () {
    this.$store.dispatch('global/getAppinfo') // 获取app信息
  }
}
</script>

<style lang="scss">
@import '~swiper/dist/css/swiper.css';
@import '~nprogress/nprogress.css';
@import '~@/scss/base.scss';
html, body{
  margin: 0px;
  padding: 0px;
  background: $bg;
  color: $default-color;
}
.app-main{
  min-height: 100vh;
  // padding-top: 40px;
  // padding-bottom: 50px;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */  
[class*='-enter-active'] {
  transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
[class*='-leave-active'] {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
/* 纵向移动 */
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateY(10px);
  opacity: 0;
}
/* 横向移动 */
.h-fade-enter, .h-fade-leave-to
/* .h-fade-leave-active for <2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.button-box{
  display: flex;
  justify-content: center;
}
.button.is-big{
  width: 70vw;
  padding: 10px;
  color: white;
  margin-bottom: 10px;
  background: $active-color;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 200;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, .3);
}
.loading-box{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.red {
  color: $red;
}
.blue {
  color: $blue;
}
.green {
  color: $green;
}
.yellow {
  color: $yellow;
}
</style>
